<template>
<div>
	
	<!-- 头部搜索栏 -->
	<div class="div_top">
		<p> 
			<i class="el-icon-location-outline"></i>
			 嘉兴智慧产业园 
			 <i class="el-icon-caret-bottom"></i>  
		 </p>
		 </div>
		 
		 <div class="div_input" :class="{input_fixed:inputFixed}">
			  <div >
			 	<i class="el-icon-search"></i>
			 	 <input type="text" placeholder="搜索饿了么商家,商品名称" />
			 </div>
		 </div>
		 	
	
	
	<!-- 分类栏 -->
	<div class="div_class"
	 @touchstart="startTime2($event)"
	@touchmove="moveTime2($event)" 
	 @touchend="slider2()">
		
		<el-carousel height="155px" ref="carousel2" 
		:autoplay="false"
		 indicator-position="outside"
		 >
		  
		  <el-carousel-item v-for="item in topClass" :key="item.thePage">
		    <div v-for="(item2,index2) in item.goodsList" :key="index2" class="div_class_item">
		    	<img :src="item2.imgSrc" /> <br />
		    	<span>{{item2.theText}}</span>
		    </div>
		  </el-carousel-item>
		</el-carousel>	
	</div>
	
	<!-- 第三排 灰色背景的 -->
	<div class="div_gray">
		<div class="div_gray_text">
			<p>品质套餐</p>
			<span>搭配齐全吃得好</span> <br />
			<a> 立即抢购 > </a>
		</div>
		
		<div class="div_gray_img">
			<img src="../../../static/elm_main/big_1.png" />
		</div>
	</div>
	
	<!-- 第四排 橙色背景的 -->
	<div class="div_orange">
		<img src="../../../static/elm_main/icon_1.png" />
		<label>超级会员</label>
		<span> .每月领20元红包 </span>
		<a> 立即开通 > </a>
	</div>
	
	<!-- 第五排 轮播图 -->
	<div class="div_lbt"
	  @touchstart="startTime($event)"
	 @touchmove="moveTime($event)" 
	  @touchend="slider()">
	 
		<el-carousel height="110px" ref="carousel">
	      <el-carousel-item v-for="(item,index) in lbtImg" :key="index">
            <img :src="item" />
          </el-carousel-item>
		</el-carousel>
		
		<div class="div_lbt_item">资深证照</div>
  </div>
  
  
  <!-- 推荐商家    recommend(推荐)-->
  <div class="div_recommend"> <span> —— 推荐商家 —— </span> </div>
	
	<!-- 筛选栏 -->
	<div class="div_sort" :class="{div_sort_hidden:sortHidden}">
		<ul>
			<li>综合排序  <i class="el-icon-caret-bottom"></i> </li>
			<li>距离最近</li>
			<li>品质联盟</li>
			<li>筛选 <i class="el-icon-bell"></i> </li>
		</ul>
	</div>
	
	<!-- 商品列表 -->
	<div class="div_biggest">
	<div class="div_foods" v-for="(item,index) in allData">
		<!-- <div class="div_blackCover">
			<div>
				不喜欢
			</div>
		</div> -->
		
		<div class="div_img">
			<img :src=item.imgSrc />
		</div>
		
		<div class="div_text">
			<p>{{item.title}}  <i class="el-icon-more"></i> </p>
			<table>
				<tr>
					<td> <i class="el-icon-star-on" v-for=" star in item.stars"></i> 
					{{item.star}} &nbsp;
					 月售 {{item.monthSale}} 单</td>
				</tr>
				
				<tr>
					<td> 起送￥{{item.beginMoney}} |
					 配送￥{{item.sendMoney}} </td>
					<td>{{item.time}} |
					{{item.distance}}</td>
				</tr>
			</table>
			
			
			<button class="btn_small btn_small_black"
			v-for=" value in item.smallItem"> 
			{{value.text}} 
			</button>
		
		</div>
		
		<div class="div_sale" >
			<a v-if="(item.sales.length+item.salesHidden.length)<3"> </a>
			<a v-else> {{item.sales.length+item.salesHidden.length}}个活动 
			<i class="el-icon-caret-bottom" 
			:class="{arrow:!item.arrowFlag}"
			@click="Open(index)"></i> 
			
			<i class="el-icon-caret-top"
			 :class="{arrow:item.arrowFlag}"
			 @click="Open(index)"></i> 
			
			</a>
			
			<div v-for="item3 in item.sales"> 
			<label :class="{label_red:item3.red,
							label_orange:item3.orange,
							label_black:item3.black,
							label_green:item3.green,
							label_blue:item3.blue}">
			{{item3.labelText}}</label> 
			<span> {{item3.spanText}} </span>
			</div>
			
			
			<!-- 刚开始隐藏的盒子 -->
			<div v-for="item3 in item.salesHidden" :class="{hiddenBtn:item.hiddenBtn}"> 
			<label :class="{label_red:item3.red,
							label_orange:item3.orange,
							label_black:item3.black,
							label_green:item3.green,
							label_blue:item3.blue}">
			{{item3.labelText}}</label> 
			<span> {{item3.spanText}} </span>
			</div>		
		</div>
	</div>
</div>
	
	<!-- 底部菜单 -->
	<div class="div_bottom">
		<ul>
			<li v-for="(item,index) in bottomMain" 
			:class="{li_chicked:item.liChicked}"
			@click="liChicked(index)">
			<i :class=item.icon></i> <br />
			<span>{{item.text}}</span> </li>
		</ul>
	</div>
	
	
</div>
</template>

<script>
	export default{
		data(){
			return{
				start_x:0,
				cur_index:0,
				direction:null,
				
				start_x2:0,
				cur_index2:0,
				direction2:null,
				
				
				sortHidden:false,
				inputFixed:false,
				
				bottomMain:[{icon:"el-icon-menu",text:"首页",liChicked:true},
				{icon:"el-icon-circle-check-outline",text:"发现",liChicked:false},
				{icon:"el-icon-document",text:"订单",liChicked:false},
				{icon:"el-icon-goods",text:"我的",liChicked:false}],
				
				topClass:[{
					thePage:1,
					goodsList:[{imgSrc:"../../../static/elm_main/top_1.png",theText:"美食"},
				{imgSrc:"../../../static/elm_main/top_3.png",theText:"商超便利"},
				{imgSrc:"../../../static/elm_main/top_4.png",theText:"水果"},
				{imgSrc:"../../../static/elm_main/top_5.png",theText:"医药健康"},
				{imgSrc:"../../../static/elm_main/top_6.png",theText:"浪漫鲜花"},
				{imgSrc:"../../../static/elm_main/top_7.png",theText:"跑腿代购"},
				{imgSrc:"../../../static/elm_main/top_8.png",theText:"汉堡披萨"},
				{imgSrc:"../../../static/elm_main/top_9.png",theText:"厨房生鲜"},
				{imgSrc:"../../../static/elm_main/top_10.png",theText:"炸鸡炸串"},
				{imgSrc:"../../../static/elm_main/top_2.png",theText:"地方菜系"}]
				},{
					thePage:2,
					goodsList:[{imgSrc:"../../../static/elm_main/top_2.png",theText:"美食"},
				{imgSrc:"../../../static/elm_main/top_10.png",theText:"商超便利"},
				{imgSrc:"../../../static/elm_main/top_9.png",theText:"水果"},
				{imgSrc:"../../../static/elm_main/top_8.png",theText:"医药健康"},
				{imgSrc:"../../../static/elm_main/top_7.png",theText:"浪漫鲜花"},
				{imgSrc:"../../../static/elm_main/top_6.png",theText:"跑腿代购"},
				{imgSrc:"../../../static/elm_main/top_5.png",theText:"汉堡披萨"},
				{imgSrc:"../../../static/elm_main/top_3.png",theText:"厨房生鲜"},
				{imgSrc:"../../../static/elm_main/top_2.png",theText:"炸鸡炸串"},
				{imgSrc:"../../../static/elm_main/top_1.png",theText:"地方菜系"}]
				}],
				
				lbtImg:["../../../static/elm_main/lbt_1.jpeg",
					"../../../static/elm_main/lbt_2.png",
					"../../../static/elm_main/lbt_3.jpeg"],
					
				allData:[{
					imgSrc:"../../../static/elm_main/list_1.png",
					title:"三米粥铺(嘉兴人才公寓店)",
					stars:4,
					star:4.8,
					monthSale:387,
					beginMoney:0,
					sendMoney:5,
					time:"40分钟",
					distance:"2.1km",
					
					hiddenBtn:true,
					arrowFlag:true,
					
					smallItem:[{text:"其它快餐"}],
					
					sales:[{
						red:true,orange:false,black:false,green:false,blue:false,
						labelText:"减",spanText:"满25减12，满49减20，满79减25"},
						{
						red:false,orange:true,black:false,green:false,blue:false,
						labelText:"换",spanText:"特价商品5元起"}],
					
				salesHidden:[{red:false,orange:false,black:false,green:true,blue:false,
								labelText:"首",spanText:"新用户下单立减17元"},
							{red:false,orange:false,black:false,green:false,blue:true,
								labelText:"赠",spanText:"满42赠精美礼品一份"},
							{red:false,orange:false,black:true,green:false,blue:false,
								labelText:"赔",spanText:"商家原因导致订单取消，赔付代金券"},]
				},{
					imgSrc:"../../../static/elm_main/list_2.jpeg",
					title:"一鸣真牛奶(人才公寓店)",
					stars:4,
					star:4.8,
					monthSale:387,
					beginMoney:0,
					sendMoney:5,
					time:"40分钟",
					distance:"2.1km",
					
					hiddenBtn:true,
					arrowFlag:true,
					
					smallItem:[{text:"其它快餐"}],
					
					sales:[{
						red:true,orange:false,black:false,green:false,blue:false,
						labelText:"减",spanText:"满25减12，满49减20，满79减25"},
						{
						red:false,orange:true,black:false,green:false,blue:false,
						labelText:"换",spanText:"特价商品5元起"}],
					
				salesHidden:[{red:false,orange:false,black:false,green:true,blue:false,
								labelText:"首",spanText:"新用户下单立减17元"},
							{red:false,orange:false,black:true,green:false,blue:false,
								labelText:"赔",spanText:"商家原因导致订单取消，赔付代金券"},]
				},{
					imgSrc:"../../../static/img/list2.png",
					title:"淘汰郎",
					stars:4,
					star:4.8,
					monthSale:387,
					beginMoney:0,
					sendMoney:5,
					time:"39分钟",
					distance:"1.1km",
					
					hiddenBtn:true,
					arrowFlag:true,
					
					smallItem:[{text:"其它快餐"}],
					
					sales:[{
						red:true,orange:false,black:false,green:false,blue:false,
						labelText:"减",spanText:"满25减12，满49减20，满79减25"},
						{
						red:false,orange:true,black:false,green:false,blue:false,
						labelText:"换",spanText:"特价商品5元起"}],
					
				salesHidden:[]
				},{
					
						imgSrc:"../../../static/img/list3.png",
						title:"一鸣真牛奶(人才公寓店)",
						stars:4,
						star:4.8,
						monthSale:387,
						beginMoney:0,
						sendMoney:5,
						time:"40分钟",
						distance:"2.1km",
						
						hiddenBtn:true,
						arrowFlag:true,
						
						smallItem:[{text:"其它快餐"}],
						
						sales:[{
							red:true,orange:false,black:false,green:false,blue:false,
							labelText:"减",spanText:"满25减12，满49减20，满79减25"},
							{
							red:false,orange:true,black:false,green:false,blue:false,
							labelText:"换",spanText:"特价商品5元起"}],
						
					salesHidden:[{red:false,orange:false,black:false,green:true,blue:false,
									labelText:"首",spanText:"新用户下单立减17元"},
								{red:false,orange:false,black:false,green:false,blue:true,
									labelText:"赠",spanText:"满42赠精美礼品一份"},
								{red:false,orange:false,black:true,green:false,blue:false,
									labelText:"赔",spanText:"商家原因导致订单取消，赔付代金券"},]
					
				}]
				
			}
		},mounted() {
			window.addEventListener('scroll',this.handleScroll)
		},
		
		methods:{
			Open(index){
				this.allData[index].arrowFlag = !this.allData[index].arrowFlag;
				this.allData[index].hiddenBtn = !this.allData[index].hiddenBtn;
			},
			
			liChicked(index){
				for(let i=0;i<this.bottomMain.length;i++){
					this.bottomMain[i].liChicked = false;
					
				if(index == i){
					this.bottomMain[i].liChicked = true
					}
				}
			},
			
			handleScroll(){
				let scrollTop = window.pageYOffset || 
				 document.documentElement.scrollTop ||
				 document.body.scrollTop;
				 
				 if(scrollTop>50){
					 this.inputFixed = true;
				 }else{
					 this.inputFixed = false;
				 }
				 
				 if(scrollTop>495){
					 this.sortHidden = true;
				 }else{
					  this.sortHidden = false;
				 }
			},
			
			startTime(event){
				this.start_x=event.targetTouches[0].clientX;
			},
			moveTime(event){
				 if(this.start_x>event.targetTouches[0].clientX){
					 this.direction="left";
				 }else{
					 this.direction="right";
				 }
			},
			slider(){
				if(this.direction=="left"){
					if(this.cur_index==this.lbtImg.length-1){
						this.cur_index=0;
						
					}else{
						this.cur_index++;
					}
				}else{
					if(this.cur_index==0){
						this.cur_index=this.lbtImg.length-1;
					}else{
						this.cur_index--;
					}
				}
				this.$refs['carousel'].setActiveItem(this.cur_index);
			},
			
			
			startTime2(event){
				this.start_x2=event.targetTouches[0].clientX;
			},
			moveTime2(event){
				 if(this.start_x2>event.targetTouches[0].clientX){
					 this.direction2="left";
				 }else{
					 this.direction2="right";
				 }
			},
			slider2(){
				if(this.direction2=="left"){
					if(this.cur_index2==this.topClass.length-1){
						this.cur_index2=0;
						
					}else{
						this.cur_index2++;
					}
				}else{
					if(this.cur_index2==0){
						this.cur_index2=this.topClass.length-1;
					}else{
						this.cur_index2--;
					}
				}
				this.$refs['carousel2'].setActiveItem(this.cur_index2);
			},
			
		}
	}
</script>

<style lang="scss">
	@import "../../assets/css/elmMain.scss";
</style>
